<script setup lang="ts">
import $api from '@/api'
import { watch,ref } from 'vue'
import RecordItem from './components/RecordItem.vue'
const record=ref({})
function init(){
  const {data}=$api.record.list()
  watch(data,(_data) =>{
    const map=new Map()
    _data.map(item =>{
      const date=new Date(item.update_date),d=date.getDate(),m=date.getMonth()+1
      const k=`${m}月${d}日`
      if(map.has(k)){
        map.get(k).push(item)
      }else{
        map.set(k,[item])
      }
    })
    record.value=Object.fromEntries(map)
  })
}
init()
</script>

<template>
  <div>
    <div v-for="(val,key) in record" :key="key">
      <div
        w:text="4xl"
        w:font="bold"
        w:m="4"
      >{{key}}</div>
      <RecordItem v-for="(item,idx) in (val as [])" :item="item" />
    </div>
  </div>
</template>

<style scoped lang="scss">

</style>

<route>
{
  meta: {
    title: '浏览记录',
    auth: true
  }
}
</route>